<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>index</title>
	<script type="text/javascript" src="javascript/dist/jquery.js"></script>
	<script type="text/javascript">
	</script>
	<style type="text/css">
		.background1{
			background-color: rgb(178, 136, 152);
		}
		.body{
			font-size: 18px;
		}
		.span{
			color:  #FF00A5;
			font-weight: strong
		}
		.div{
			color:  #FF00A5;
			font-weight: strong;
			height: 30px;
			width: 500px;
		}
		.div_1_3{
			height: 180px;
		}
		.a{
			color:  #FFFFFF;
		}
	</style>
  </head>
  
  <body class="background1 body">
  	<textarea rows="10" cols="30" name="left_toSend" class="toSend"></textarea>
  	目的人:<input name="targetUser" value="" id="targetName">
  	<input value="send" type="button" name="msg_submit" class='msg_submit'>
  	<textarea rows="10" cols="30" name="right_recieve" class='right_recieve' disabled='true'></textarea>
  	<br>
  	<div id="login_div">
		用户名:<input name="userName" value="" id="userName"> 密码:<input
			name="password" value="" id="password"> > <input type="button"
			value="登陆" class="login">
	</div>
  	<br>
<!--   	<div id="test_timeout">test_timeout</div> -->
  </body>
  <script type="text/javascript">
  		$(function(){
  			$('body').on('keyup',function(event){
  				var keyCode=event.keyCode;
  				if(keyCode=='13'){
  					var data=$('.toSend').val();
  	  				var target=$('#targetName').val();
  	  				$.ajax({
  	  					url:'<%=basePath%>base/sendMsg',
  	  					type:'post',
  	  					dataType:'json',
  	  					data:{'toSend':data,'target':target},
  	  					success:function(data){
  	  						$('.toSend').val('');
  	  						console.log(data);
  	  					}
  	  				});
  				}
  			});
  			function getMsg(){
  				var right_recieve=$('.right_recieve');
  				$.ajax({
  					url:'<%=basePath%>base/getMsg',
  					type:'post',
  					dataType:'json',
  					success:function(data){
  						if(data.status='SUCCESS'&&data.msgs){
  							var msgs=data.msgs;
  							var recieveVal=right_recieve.html();
  							if(recieveVal){
	  							right_recieve.html(recieveVal+'\n'+msgs);
  							}else{
  								right_recieve.html(msgs);
  							}
  							console.log(msgs.length);
  						}
  					}
  				});
  			}
  			function synccheck(){
  				$.ajax({
  					url:'<%=basePath%>base/synccheck',
  					type:'post',
  					dataType:'json',
  					success:function(data){
  						if(data.status='SUCCESS'){
							if(data.isHasMsg=='true'){
								getMsg();
							}
							synccheck();
  						}
  					}
  				});
  			}
  			jQuery('.login').on('click',function(){
  				var userName=$('#userName').val();
  				var password=$('#password').val();
  				$.ajax({
  					url:'<%=basePath%>base/loginChat',
  					type:'post',
  					data:{'userName':userName,'password':password},
  					dataType:'json',
  					success:function(data){
  						$('#login_div').css('display','none');
						console.log(data);
						synccheck();
  					}
  				});
  			});
  			jQuery('.msg_submit').on('click',function(){
  				var data=$('.toSend').val();
  				var target=$('#targetName').val();
  				$.ajax({
  					url:'<%=basePath%>base/sendMsg',
  					type:'post',
  					dataType:'json',
  					data:{'toSend':data,'target':target},
  					success:function(data){
  						$('.toSend').val('');
  						console.log(data);
  					}
  				});
  			});
  			jQuery('#test_timeout').on('click',function(){
				$.ajax({
					url:'<%=basePath%>base/synccheck',
					type:'post',
					success:function(data){
						console.log('success');
					},
					error:function(data){
						console.log('fail');
					}
					
				});
  			});
  		})
  </script>
</html>
